<template>
    <div class="login">
        <video 
            autoplay
            muted
            loop
            playsInline
            id="myvideo"
            :src="src" 
            class="myvideo">
        </video>
        <div class="login-box">
            <h2 class="title">欢迎注册</h2>
            <div class="box">
                <el-form
                    label-position="right"
                    label-width="100px"
                    :model="form"
                    class="myform"
                    ref="myform"
                    :rules="rules"
                >
                    <el-form-item 
                        label="用户名称" 
                        prop="username"
                    >
                        <el-input clearable v-model="form.username"  :prefix-icon="User" placeholder="请输入用户名"/>
                    </el-form-item>
                    <el-form-item
                        prop="phone"
                        label="手机号码"
                    >
                        <el-col :span="24">
                            <el-input v-model="form.phone" placeholder='请输入手机号码' clearable :prefix-icon="Iphone" > </el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item 
                        label="登录密码"
                        prop="password"
                    >
                        <el-input clearable @blur="passwordBlur" v-model="form.password" :prefix-icon="Lock"  show-password type="password"  placeholder="请输入密码" />
                    </el-form-item>
                    <el-form-item 
                        label="确认密码"
                        prop="dbpassword"
                    >
                        <el-input clearable v-model="form.dbpassword" :prefix-icon="Lock"  show-password type="password"  placeholder="请输入密码" />
                    </el-form-item>

                    <el-form-item class="lastitem">
                        <div class="alinks">
                            <router-link  class="litem" :to="{name:'login'}">有账号,去登录!</router-link>
                            <router-link  class="litem bg" :to="{name:'forgetpass'}">忘记密码</router-link>
                        </div>
                    </el-form-item>

                    <el-form-item>
                        <el-button block type="success" @click="submitForm" class="btnblock">注册</el-button>
                        <el-button block type="warning" @click="resetFields() " class="btnblock">重置</el-button>

                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import { reactive, toRefs ,ref, onMounted } from 'vue'
import {UserFilled,Lock,User,Iphone} from '@element-plus/icons-vue'
import {reg} from "@/utils/validate"
import {ElMessage } from 'element-plus'
import {ajax} from "@/api"
import { useRouter } from 'vue-router'
export default {
    setup(props){
        const myform = ref();
        const router = useRouter()
        onMounted(()=>{
            ajax.apiTest()
            .then(res=>{
                
            })
        })
        const submitForm =  ()=>{
            console.log(myform)
            myform.value.validate(async (valid)=>{
                if(valid){
                    // 注册操作
                    // 数据库操作
                    let res = await ajax.register(state.form)
                    if(res.code==200){
                        router.push({name:'login',query:{username:state.form.username,phone:state.form.phone}})
                    }
                }else{
                    //  
                    ElMessage.error("请输入正确的注册信息")
                }
            })  
        }
        const resetFields = ()=>{
            console.log(myform.value)
            myform.value.resetFields()   // 重置表单  
        }
        const checkDbPass = (rule,value,callback)=>{
            if(state.form.password!=value){
                callback(new Error('两次密码不一样!!!'))
            }else{
                callback()
            }
        }
        const passwordBlur = (value)=>{
            console.log(state.form.password)
            console.log(myform)

            if(reg.pwd.test(state.form.password) && reg.pwd.test(state.form.dbpassword) ){
                // 吊起dbpassword 正则方法  
                // if(state.form.password!=state.form.dbpassword){
                //     ElMessage.error('两次密码输入不一样')
                // }
                myform.value.validateField('dbpassword')
            }
        }
        const state = reactive({
            User,
            Iphone,
            Lock,
            form:{
                role:1,  // 只能注册普通居民 
            },
            activeName:'username',
            rules:{
                username:[
                    {required: true, message: '用户名称必填'}
                ],
                password:[
                    {required: true, message: '登录密码必填'},
                    {
                        pattern:reg.pwd,message:'密码格式不正确'
                    }
                ],
                dbpassword:[
                    {required: true, message: '密码必填'},
                    {
                        pattern:reg.pwd,message:'格式不正确'
                    },
                    {
                        validator:checkDbPass,
                        message:'两次密码不一样',
                        trigger: 'blur'
                    }
                ],
                phone:[{required:true,message:'手机号码必填'},{pattern:reg.phone,message:'请填写正确的手机号码'}]
            },
            src:"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/3760b2031ff41ca0bd80bc7a8a13f7bb_preview.mp4"
        })
        return {
            ...toRefs(state),
            myform,
            passwordBlur,
            resetFields,
            submitForm
        }
    }
}
</script>

<style lang="scss" >
.login{
  width:100%;
  height:100%;
    .myvideo{
        min-width: 100%;
        min-height: 100%;
        height: auto;
        width: auto;
        position: fixed;
        right: 0;
        bottom: 0;
        z-index: 0;
    }
    .login-box{
        position: absolute;
        width:390px;
        height:420px;
        // min-height:340px;
        border:1px solid darkkhaki;
        border-radius: 8px;
        padding:15px;
        background: rgba(0, 0, 0, 0.2);
        left:0;
        right:0;
        bottom:0;
        top:0;
        margin:auto;
        .title{
            font-size:26px;
            text-align: center;
            font-weight: 500;
            color:#fff;
        }
        .box{
            margin-top:20px;
            .el-tabs__nav {
                width:100%;
                .el-tabs__active-bar{
                    background-color: darkorange;
                }
                .el-tabs__item{
                    flex:1;
                    width:50%;
                    text-align: center;
                    color:#fff;
                }
                .is-active{
                    color:darkorange;
                }
            }
            .myform{
                .el-input__icon{
                    color:#fff;
                }
                .el-input__inner{
                    background: transparent;
                    color:#fff;
                }
                 .el-form-item__label{
                    color:#fff;
                }

                .flex{
                    display: flex;
                    .btn{
                        flex:1;
                    }
                }
                .lastitem{
                    margin-bottom: 0;
                    width:100%;
                    ::v-deep .el-form-item__content{
                        line-height:1 ;
                    }
                    .alinks{
                        width:100%;
                        display: flex;
                        justify-content: space-between;
                        .litem{
                            font-size: 12px;
                            color:darkorange;
                        }
                        .color{
                            color:#fff;
                        }
                        .bg{
                            color:aqua
                        }
                    }
                }

                .btnblock{
                    width:100%;
                    margin:10px 0 0 0;
                }
            }
        }
    }
}
</style>